<!DOCTYPE html>
<br>
<head>
    <meta charset="utf-8">
    <title>出勤页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
</head>
<h1 align="center">考勤系统</h1>
</br>
<body>
<form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="username" placeholder="请输入姓名">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="usernum" placeholder="请输入工号">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date" placeholder="请选择日期">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="" id="dept">
                <option value="">请选择部门</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
            <select name="buildings" lay-verify="required" lay-search="" id="role">
                <option value="">请选择角色</option>
                <option value=0>工作人员</option>
                <option value=1>领导</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" onclick="search()"><i class="layui-icon layui-icon-search"></i>查询
            </button>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" onclick="exportData()"><i class="layui-icon layui-icon-export"></i>导出
            </button>
        </div>
    </div>
</form>

<table class="layui-hide" id="test"></table>


<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script>
    function exportData() {
        layui.use(['table'], function () {
            var $ = layui.jquery
            var username = $("#username").val();
            var usernum = $("#usernum").val();
            var date = $("#date").val();
            var dept = $("#dept").val();
            var role = $("#role").val();
            var login_username =
                location.href = "/attendance/export?username=" + username + "&usernum=" + usernum + "&date=" + date + "&dept=" + dept + "&role=" + role
        })
    }

    function search() {
        layui.use(['table'], function () {
            var table = layui.table;
            var $ = layui.jquery
            table.reload('attendanceTable', {
                url: '/attendance/page'
                , where: {
                    username: $("#username").val(),
                    usernum: $("#usernum").val(),
                    date: $("#date").val(),
                    dept: $("#dept").val(),
                    role: $("#role").val(),
                }
                , page: {
                    curr: 1
                }
            });
        });
    }

    function getPage() {
        layui.use(['table'], function () {
            var table = layui.table;
            var $ = layui.jquery

            table.render({
                elem: '#test'
                , id: 'attendanceTable'
                , height: 'full-220'
                , width: '100%'
                , url: '/attendance/page'
                , where: {
                    username: $("#username").val(),
                    usernum: $("#usernum").val(),
                    date: $("#date").val(),
                    dept: $("#dept").val(),
                    role: $("#role").val(),
                    login_username: $("#login_username").val(),
                    login_pswd: $("#login_userpswd").val(),
                }
                , cols: [[
                    {field: 'aid', title: '编号', minWidth: 80}
                    , {field: 'year', title: '年', minWidth: 80}
                    , {field: 'month', title: '月', minWidth: 60}
                    , {field: 'day', title: '日', minWidth: 60}
                    , {field: 'username', title: '姓名', minWidth: 87}
                    , {field: 'usernum', title: '工号', minWidth: 105}
                    , {field: 'dept', title: '部门', minWidth: 140}
                    , {field: 'channel', title: '通道', minWidth: 145}
                    , {field: 'mintime', title: '最早时间', minWidth: 180}
                    , {field: 'maxtime', title: '最晚时间', minWidth: 180}
                    , {field: 'islate', title: '迟到'}
                    , {field: 'isearly', title: '早退'}
                    , {field: 'role', title: "角色"}
                ]]
                , page: true
            });

        });
    }


    layui.use(['form', 'laydate', 'dropdown', 'util', 'layer'], function () {
        var laydate = layui.laydate;
        var form = layui.form
        var dropdown = layui.dropdown
            , util = layui.util
            , layer = layui.layer
            , $ = layui.jquery;


        //检查项目添加到下拉框中
        $.ajax({
            url: '/attendance/dept',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $.each(data.data, function (index, item) {
                    $("#dept").append(new Option(item, item));
                });
                form.render();
            }
        })

        //常规用法
        laydate.render({
            elem: '#date'
        });

        getPage();
    });
</script>

</body>

</html>